<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
    <link rel="stylesheet" href="/ftl/css/laypage.css">

    <script src="/ftl/js/vue/vue.min.js"></script>
    <script src="/ftl/js/jquery/jquery.min.js"></script>
    <script src="/ftl/js/laypage/laypage.js"></script>
    <script src="/ftl/js/layer/layer.js"></script>
</head>
<body>
<div id="app" class="container">
    <form action="" class="form-inline" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="">用户名称</label>
            <input type="text" class="form-control" id="name" placeholder="用户名称">
        </div>
        <button type="button" id="findUser" class="btn btn-success">查询用户</button>
        <button type="button" id="addUser" class="btn btn-danger">新增用户</button>
    </form>

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <th>用户</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                <td><a href="#" @click="editEvent(item.id)">编辑</a>
                    <a href="#" @click="delEvent(item.id)">删除</a></td>
                </td>
            </tr>
            </tbody>
            <tr>
                <#--分页-->
                <td colspan="3">
                    <div id="pagenav"></div>
                </td>
            </tr>
        </table>
    </div>
</div>
<script>
    // 创建一个新的 Vue 实例，并挂载到 id 为 "app" 的 DOM 元素上
    var app = new Vue({
        el: '#app',
        // 数据模型定义
        data: {
            result: [] // 存储从服务器获取的数据
        }
    });

    /**
     * 查询用户数据
     * @param {number} [curr] - 当前页码，默认为1
     */
    function getUserPageList(curr) {

        $.ajax({
            type: 'post', // HTTP 请求类型
            dataType: 'json', // 预期服务器返回 json 格式的数据
            url: '/getPage', // 发送请求的目标 URL
            data: {
                pageNum: curr || 1, // 如果没有传入当前页，则默认为第一页
                pageSize: 5, // 每页显示的数量
                name: $("#name").val() // 获取搜索框中的值作为查询条件
            },
            success: function (msg) {
                app.result = msg.page; // 将服务端返回的 page 对象赋值给 Vue 实例中的 result 属性

                laypage({ // 使用 laypage 插件初始化分页组件
                    cont: 'pagenav', // 分页容器的选择器
                    pages: msg.totalPage, // 总页数
                    skin: '#DB7093', // 自定义皮肤颜色
                    first: '首页', // 第一页文本
                    last: '最后一页', // 最后一页文本
                    curr: curr || 1, // 默认显示第一页或指定页面
                    jump: function (obj, first) { // 用户触发跳转时执行
                        if (!first) { // 判断是否是首次加载
                            getUserPageList(obj.curr); // 跳转至 obj.curr 页面
                        }
                    }
                });
            }
        });
    }

    getUserPageList();
    // 查询用户事件
    $("#findUser").click(function () {
        getUserPageList();
    })
    // 为 ID 为 "addUser" 的按钮绑定点击事件
    $("#addUser").click(function () {

        // 使用 layer 插件打开一个对话框（模态窗体）
        layer.open({

            // 设置类型为页面层，即加载新的HTML页面到当前层中
            type: 2,

            // 标题栏文本
            title: '添加用户',

            // 是否开启固定大小模式
            fix: false,

            // 允许最大化最小化操作
            maxmin: true,

            // 点击遮罩关闭该层
            shadeClose: true,

            // 弹出层宽高设置
            area: ['1100px', '600px'],

            // 加载的内容地址，这里是一个外部 HTML 文件路径
            content: '/ftl/add.html',

            // 当此层关闭后执行的操作
            end: function () {

                // 调用函数重新获取用户列表并更新显示
                getUserPageList();

            }

        });

    });
    // 定义一个名为 delEvent 的函数，该函数接收一个参数 id，用于标识要删除的用户记录。
    var delEvent = function (id) {

        // 显示一个确认对话框，询问用户是否确实想要删除指定的记录。
        // 对话框包含两个按钮：“是”和“否”。
        layer.confirm('您确定要删除么？', {
            btn: ['是', '否']

        }, function () {  // 如果用户点击了“是”，则执行此回调函数。

            // 使用 AJAX 发送 GET 请求到服务器端点 /del 来处理删除操作。
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/del",  // 删除用户的请求 URL。
                data: {
                    id: id  // 要发送的数据包括需要删除的用户 ID。
                },
                success: function (msg) {
                    // 成功删除后，重新获取页面列表并显示删除成功的消息。
                    getUserPageList();
                    layer.msg('已经成功删除记录' + id, {icon: 5});
                }

            });

        }, function () {  // 如果用户点击了“否”，则执行此回调函数，不做任何操作。

        });
    }
    // 编辑用户事件
    var editEvent = function (id) {
        // 打开一个弹出层，用于编辑用户信息
        layer.open({
            type: 2, // 弹出层类型为iframe
            title: '编辑用户', // 弹出层标题
            fix: false, // 弹出层不固定在位置
            maxmin: true, // 允许最大化和最小化
            shadeClose: true, // 允许点击遮罩关闭
            area: ['1100px', '600px'], // 设置弹出层的宽度和高度
            content: '/editpage?id=' + id, // 弹出层的内容为编辑用户页面，通过传递用户ID进行查询
            end: function () {
                // 弹出层关闭后，重新加载用户列表
                getUserPageList();
            }
        });
    }
</script>

</body>